<template>
  <div class="info_config_page">
    <div class="common_form_search">
      <el-form
        :inline="true"
        :model="topForm"
        class="form-inline"
      >
        <el-row>
          <el-col :span="8">
            <div class="flex colHeight">
              <label>订单编号：</label>
              <div class="flex-1">
                <p>{{ topForm.order_no }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex colHeight">
              <label>履约状态：</label>
              <div class="flex-1">
                <p>{{ 
                rentStatus == 1
                  ? "足额归还"
                  : rentStatus == 2
                  ? "部分归还"
                  : rentStatus == 3
                  ? "未归还"
                  : rentStatus == 4
                  ? "退租" : "订单已完结"
               }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex colHeight">
              <label>融资状态：</label>
              <div class="flex-1">
                <p>{{ '未融资' }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="flex colHeight">
              <label>租赁方平台：</label>
              <div class="flex-1">
                <p>{{ topForm.leaseCorpName }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex colHeight">
              <label>订单所属商家：</label>
              <div class="flex-1">
                <p>{{ shopname }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <p class="edit-header topTitle"><span>订单上链信息</span></p>
    <div class="chainInfo">
      <div>
        <p class="p">
          <span class="beforeIcon"></span><span>订单信息</span>
        </p>
        <el-table :data="tableData" border>
          <el-table-column align="center" label="订单创建时间" prop="create_time" />
          <el-table-column align="center" label="订单支付时间" prop="pay_time" />
          <el-table-column align="center" label="订单支付类型" width="120">
            <template slot-scope="scope">
              <span>{{scope.row.pay_type==1? '预授权': 
                scope.row.pay_type==2? '信用套餐': 
                scope.row.pay_type==3? '支付宝代扣': '其他'}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="月租金(元)/总租金(元)">
            <template slot-scope="scope">
              <span>{{scope.row.orderLease[0].rent}}/{{scope.row.rent_total}}</span>
            </template>
          </el-table-column> 
          <el-table-column align="center" label="实际预授权金额(元)" prop="foregift_deduct" />
          <el-table-column align="center" label="到期形式" width="100">
            <template slot-scope="scope">
              <span>{{scope.row.relet_rent_total > 0 ? '到期买断' : '租完即送'}}</span>
            </template>
          </el-table-column> 
          <el-table-column align="center" label="到期买断价(元)" width="120" prop="relet_rent_total"/>
          <el-table-column align="center" label="租赁合同" width="100">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="checkFlow(scope.row.pact_url)">查看合同</el-button>
            </template>
          </el-table-column> 
          <el-table-column align="center" label="保险单号" prop="insuranceNO" />
        </el-table>
      </div>
      <div>
        <p class="p">
          <span class="beforeIcon"></span><span>商品信息</span>
        </p>
        <el-table :data="tableData" border>
          <el-table-column align="center" label="商品编码" width="100" prop="goods_id" />
          <el-table-column align="center" label="商品版本" prop="goods_version_id" />
          <el-table-column align="center" label="商品名称">
            <template slot-scope="scope">
              <el-button type="text" @click="jumpGoodsShoot(scope.row.order_no)">{{scope.row.goods_title}}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品数量" width="100" prop="amount" />
          <el-table-column align="center" label="商品来源">
            <template>
              <span>{{'租赁机构'}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <p class="p">
          <span class="beforeIcon"></span><span>用户信息</span></p>
        <el-form
          :inline="true"
          :model="topForm"
          class="form-inline"
        >
          <el-row>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>租赁方类别：</label>
                <div class="flex-1">
                  <p>{{ topForm.lessee_type == 1 ? "企业用户" : "个人用户"}}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>联系人姓名：</label>
                <div class="flex-1">
                  <p>{{ topForm.cert_name }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>联系人电话：</label>
                <div class="flex-1">
                  <p>{{ topForm.phone }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>身份证号：</label>
                <div class="flex-1">
                  <p>{{ topForm.cert_no }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>身份证照片：</label>
                <div class="flex-1">
                  <el-button type="primary" size="mini" @click="checkPhoto(topForm.idcard_front)">查看图片</el-button>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>支付宝账号：</label>
                <div class="flex-1">
                  <p>{{ topForm.alipay_uid }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>身份认证类型：</label>
                <div class="flex-1">
                  <p>{{
                  topForm.user_type == 1
                      ? "支付宝实人"
                      :topForm.user_type == 2
                      ? "芝麻实人" : "非蚂蚁实人"
                  }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div>
        <p class="p">
          <span class="beforeIcon"></span><span>物流信息</span></p>
        <el-form
          :inline="true"
          :model="topForm"
          class="form-inline"
        >
          <el-row>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>物流信息：</label>
                <div class="flex-1">
                  <p>{{ topForm.logistics_name }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>物流单号：</label>
                <div class="flex-1">
                  <p>{{ topForm.logistics_no }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>物流状态：</label>
                <div class="flex-1">
                  <p>{{
                  topForm.logistics_status == 0
                      ? "未发货"
                      :topForm.logistics_status == 1
                      ? "已发货"
                      :topForm.logistics_status == 2
                      ? "运输中"
                      :topForm.logistics_status == 3
                      ? "已签收"
                      : "其他"
                  }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>发货时间：</label>
                <div class="flex-1">
                  <p>{{ topForm.deliver_time }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>签收时间：</label>
                <div class="flex-1">
                  <p>{{ topForm.confirm_time }}</p>
                </div>
              </div>
            </el-col>
            <!-- <el-col :span="8">
              <div class="flex colHeight">
                <label>是否退租：</label>
                <div class="flex-1">
                  <p>{{ topForm. }}</p>
                </div>
              </div>
            </el-col> -->
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="flex colHeight">
                <label>签收链接：</label>
                <div class="flex-1">
                  <el-button type="primary" size="mini" @click="jumpLogistics(topForm.order_no)">查看链接</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div>
        <p class="p">
          <span class="beforeIcon"></span><span>承诺信息和履约信息</span></p>
        <el-table :data="orderList" border >
          <el-table-column align="center" label="期数" width="90">
            <template slot-scope="scope">
              <span>第{{scope.row.which_period}}期</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="应付租金（元）" prop="rent"/>
          <el-table-column align="center" label="应付租金时间" prop="begin_time" />
          <el-table-column align="center" label="归还租金（元）" prop="rent" />
          <el-table-column align="center" label="归还租金时间" prop="pay_time" />
          <el-table-column align="center" label="归还方式">
            <template slot-scope="scope">
              <span>{{
              scope.row.pay_type == 1
                ? "预授权代扣"
                : scope.row.pay_type == 2
                ? "支付宝代扣"
                : scope.row.pay_type == 3
                ? "主动还款" : "其他"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="流水号" prop="alipay_trade_no" width="200"/>
          <el-table-column align="center" label="租金归还状态" prop="">
            <template slot-scope="scope">
              <span>{{
              scope.row.rent_status == 1
                ? "足额归还"
                : scope.row.rent_status == 2
                ? "部分归还"
                : scope.row.rent_status == 3
                ? "未归还"
                : scope.row.rent_status == 3
                ? "退租" : "订单已完结"
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

    
    <div slot="footer" class="dialog-footer setBtn">
      <el-button type="primary" @click="toBack()">返回</el-button>
    </div>
  </div>
</template>

<script>
import {financDetails} from "@/api/lease";
export default {
  props: ['orderNo'],
  data() {
    return {
      tableData: [],
      orderList: [],
      topForm: {},
      rentStatus: '',
      shopname: '',
    };
  },
  methods: {
    checkFlow(url){
      if(!url){
        this.$message.warning("暂无合同")
      } else {
        window.open(this.$globalObj.imgBaseUrl + url);
      }
    },
    checkPhoto(url){
      if(!url){
        this.$message.warning("暂无照片")
      } else {
        window.open(this.$globalObj.imgBaseUrl + url);
      }
    },
    toBack(){
      this.$router.go(-1)
    },
    jumpGoodsShoot(id){
      const { href } = this.$router.resolve({
        path: "/goodsDetails",
        query: { orderNo: id }
      });
      window.open(href, '_blank');
    },
    jumpLogistics(num){
      const { href } = this.$router.resolve({
        path: "/logisticsH5",
        query: { orderNo: num }
      });
      window.open(href, '_blank');
    },
    // 获取列表
    getList() {
      financDetails({orderNo: this.orderNo}).then((res) => {
        this.topForm = res;
        this.tableData = [res];
        this.shopname = res.shopName.shopname
        this.rentStatus = res.orderLease[res.orderLease.length-1].rent_status
        this.orderList = res.orderLease
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.colHeight {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 35px;
  label {
    width: 110px;
  }
}
.topTitle {
  margin-top: 20px;
  border: 1px solid #e6e6e6;
}
.chainInfo {
  border: 1px solid #e6e6e6;
  border-top: none;
  padding: 30px;
  .p{
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
}
.beforeIcon {
  display: inline-block;
  width: 28px;
  height: 21px;
  vertical-align: middle;
  margin-right: 15px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../../../assets/images/xcx.png");
}
.setBtn{
  text-align: center;
  margin-top: 20px;
}
</style>
